<template>
  <div id="personEdit">
    <div class="title">Person Edit</div>
    <div class="content">
      <div class="edit_person_page">
        <el-form class="person_edit_form"  v-if="editPersonInfoModel" :rules="rules" ref="editPersonForm" :model="editPersonInfoModel" label-width="140px"  >
          <el-form-item label="Organization" prop="organization">
            <el-input  style="width:160px"></el-input>
          </el-form-item>
          <el-form-item label="EmployeeId" prop="employeeCode">
            <el-input v-model="editPersonInfoModel.employeeCode" style="width:160px"></el-input>
          </el-form-item>
          <el-form-item label="Hire date" prop="hireDate">
            <el-date-picker type="date" format="MM/dd/yyyy" placeholder="select hire date" v-model="editPersonInfoModel.hireDate" style="width: 160px;" @change="function(value){editPersonInfoModel.hireDate = value}"></el-date-picker>
          </el-form-item>
          <el-form-item label="Status" prop="status">
            <el-select v-model="editPersonInfoModel.status" style="width:160px">
              <el-option v-for="(item,key) in personStatusList" :key="key"  :label="item.showName" :value="parseInt(item.value)">{{item.showName}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Birth date" prop="birthDate">
            <el-date-picker type="date" placeholder="selecte birth date" format="MM/dd/yyyy" v-model="editPersonInfoModel.birthDate" style="width: 160px;"  @change="function(value){editPersonInfoModel.birthDate = value}"></el-date-picker>
          </el-form-item>
          <el-form-item label="Gander" prop="gender">
            <el-select v-model="editPersonInfoModel.gender" style="width:160px">
              <el-option v-for="(item,key) in personGenderList" :key="key"  :label="item.showName" :value="parseInt(item.value)">{{item.showName}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="WorkLocation" prop="workLocationId">
            <el-select v-model="editPersonInfoModel.workLocationId" style="width:320px">
              <el-option v-for="(item,key) in personWorkLocationList"  :key="key" :label="item.showName" :value="item.value"></el-option>
              <el-option label="add New Location" value="add"></el-option>
            </el-select>

            <!--添加工作地点的表单 start==-->
            <el-form v-if="editPersonInfoModel.workLocationId == 'add'"  ref="addWorkLocationForm" :model="workLocationModel" :rules="addLocationRule" class="add_new_location animated fadeIn">
              <el-row>
                <el-col :span="23">
                  <el-form-item  label="Address" prop="workAddress" ><el-input v-model="workLocationModel.workAddress"></el-input></el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-form-item  label="City or Town" prop="wCity"><el-input  v-model="workLocationModel.wCity"></el-input></el-form-item>
                </el-col>
                <el-col :span="7" :offset="1">
                  <el-form-item  label="State" >
                    <el-select v-model="workLocationModel.wState" style="width:160px">
                      <el-option v-for="(item,key) in stateList" :key="key"  :label="item.showName" :value="item.value">{{item.showName}}</el-option>
                    </el-select></el-form-item>
                </el-col>
                <el-col :span="7" :offset="1">
                  <el-tooltip  class="item" effect="dark" content="the format is five numbers like '12345' " placement="right">
                    <el-form-item  label="ZIP Code" prop="wZipCode"><el-input  v-model="workLocationModel.wZipCode"></el-input></el-form-item>
                  </el-tooltip>
                </el-col>
              </el-row>
              <el-form-item class="add_location_btn_group">
                <el-button v-touch-ripple type="primary" @click="submitAddNewWorkLocation" >Done</el-button>
                <el-button v-touch-ripple @click="editPersonInfoModel.workLocationId=''">Cancel</el-button>
              </el-form-item>
            </el-form>
            <!--添加工作地点的表单 end==-->

          </el-form-item>
          <el-form-item label="Home Address" prop="homeAddress">
            <el-input v-model="editPersonInfoModel.homeAddress" style="width:320px"></el-input>
          </el-form-item>
          <el-form-item label="City or Town"  prop="hCityTown">
            <el-input v-model="editPersonInfoModel.hCityTown" style="width:160px"></el-input>
          </el-form-item>
          <el-form-item label="State" prop="hState">
            <el-select v-model="editPersonInfoModel.hState" style="width:160px">
              <el-option v-for="(item,key) in stateList" :key="key"  :label="item.showName" :value="item.value">{{item.showName}}</el-option>
            </el-select>
          </el-form-item>
          <el-tooltip  class="item" effect="dark" content="the format is five numbers like '12345' " placement="right">
            <el-form-item label="Zip Code" prop='hZipCode'>
              <el-input   v-model="editPersonInfoModel.hZipCode" style="width:160px"></el-input>
            </el-form-item>
          </el-tooltip>
          <el-form-item label="Email" prop="email">
            <el-input v-model="editPersonInfoModel.email" style="width:160px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-touch-ripple type="primary" @click="submit" >Done</el-button>
            <el-button v-touch-ripple @click="$router.back()">Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components:{
    },
    data:function(){
      var validateZipCode = function (rule, value, callback) {
        var reg = /^[0-9]{5}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('the zipCode format is error'));
        }
      }
      return{
        editPersonInfoModel:{
          "personId": null,
          "employeeCode":null,
          "hireDate":null,
          "status": null,//员工状态1;2;3;4;5
          "birthDate": null,
          "gender": null,//员工性别1；2；3
          "workLocationId": null,//工作地点id
          "homeAddress": null,//家庭地址
          "hCityTown": null,
          "hState": null,
          "hZipCode": null,
          "email": null
        },
        workLocationModel:{
          "workAddress":"",
          "wCity":"",
          "wState":"",
          "wZipCode":""
        },
        addLocationRule:{
          'wZipCode':[
            {required:true,message:'work zipCode is required',trigger:'blur'},
            {validator: validateZipCode, trigger: 'blur'}
          ],
          'wCity':[
            {required:true,message:'work city is required',trigger:'blur'}
          ],
          'workAddress':[
            {required:true,message:'work address is required',trigger:'blur'}
          ]
        },
        rules:{
          'hZipCode':[
            {required:true,message:'home zipCode is required'},
            {validator: validateZipCode, trigger: 'blur'}
          ],
          'hCityTown':[
            {required:true,message:'home city is required',trigger:'blur'}
          ],
        }
      }
    },
    created:function(){
      //获取初始化的数据
      this.$store.dispatch('getEditPersonInfo',{param:{personId:this.getPersonId()}})
    },
    activated:function(){
      //获取初始化的数据
      //this.$store.dispatch('getEditPersonInfo',{param:{personId:this.getPersonId()}})
    },
    computed:{
      /**
       *员工初始化数据
       */
      editPersonInfo:function(){
        if(this.$store.getters.editPersonInfo){
         /* for(var i in this.editPersonInfoModel ){
            if(this.$store.getters.editPersonInfo[i]){
              this.editPersonInfoModel[i] = this.$store.getters.editPersonInfo[i];
            }
          }*/
          this.editPersonInfoModel = Object.assign(this.editPersonInfoModel,this.$store.getters.editPersonInfo)
        }
        return this.$store.getters.editPersonInfo;
      },
      /**
       * 员工状态列表
       */
      personStatusList:function(){
        return this.$store.getters.personStatusList;
      },
      /**
       * 员工性别列表
       */
      personGenderList:function(){
        return this.$store.getters.personGenderList;
      },
      /**
       * 员工工作地址列表
       */
      personWorkLocationList:function(){
        return this.$store.getters.personWorkLocationList;
      },
      /**
       * 州列表
       */
      stateList:function(){
        return this.$store.getters.stateList;
      }
    },
    watch:{
      editPersonInfo:function (aa,bb) {
      }
    },
    mounted:function(){
    },
    methods:{
      /**
       * 关闭返回时跳转路由
       */
      back:function(){
        this.$router.push('/payRoll/payRollCenter');
      },
      /**
       *获取personId
       */
      getPersonId(){
        return this.$route.params.id
      },
      /**
       *获取表单更改项
       * @param modelData 当前表单数据
       * @param defaultData 初始化表单数据
       */
      getFormParam(modelData,defaultData){
        var obj = {};
        if(modelData && defaultData && typeof modelData == "object" && typeof defaultData == "object"){
          for(var i in modelData){
            if(modelData[i]!= defaultData[i]){
              obj[i] = modelData[i];
            }
          }
          if(!Object.keys(obj).length){
            this.$message.warning('nothing changed!');
            return false;
          }
          return true;
        }
        return false;
      },
      /**
       *验证并提交表单
       */
      submit(){
        var t = this;
        t.$refs.editPersonForm.validate(function (valid) {
          if (valid) {
            var flag = t.getFormParam(t.editPersonInfoModel,t.editPersonInfo);
            if(!flag) return;
            t.editPersonInfoModel.personId = t.getPersonId();
            t.$store.dispatch('modifyPersonInfo',{param:t.editPersonInfoModel,success:function(){
              t.$message.success('update success');
              //相关成功操作
              t.$router.back()
            }});
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      submitAddNewWorkLocation(){
        var t = this;
        t.$refs.addWorkLocationForm.validate(function (valid) {
          if (valid) {
            var param = t.workLocationModel;
            t.$store.dispatch('addWorkLocation',{param:param,success:function(){
              t.$message.success('add success');
              t.editPersonInfoModel.workLocationId = ""
              t.$refs.addWorkLocationForm.resetFields();
              //相关成功操作
            }});
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" >

  @import "../../assets/css/variable";
  #personEdit{
    >.content{
      padding: 0;
    }
  }
  .edit_person_page {
    min-height: 100%;
    background-color: #fff;
    padding: 50px;
    box-sizing: border-box;
    .person_edit_form{
      padding-left: 300px;
      .add_new_location{
        margin: 10px 0;
        padding: 10px;
        border: 4px #d3dce6  solid;
        .el-form-item{
          margin-bottom: 18px;
          .el-form-item__label{
            float: none;
          }
        }
        .add_location_btn_group{
          margin-top: 8px;
        }
      }
    }


  }
</style>
